﻿<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@include file="/common/taglibs.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>文件管理</title>

    <!--common-->
    <link href="/resources/src/css/main.css" rel="stylesheet">
    <link href="/resources/src/css/responsive.css" rel="stylesheet">
    <link href="/resources/src/css/file-list.css" rel="stylesheet">
    <link href="/resources/src/css/paginate.css" rel="stylesheet">
    <style type="text/css">
      .bar-on{background-color:#ff7d5f;height:3px;width:70%}
	    .uploadbar{background-color:#737687;width:200px;height:3px;margin-left:130px;margin-top:0;display:none}
    </style>
</head>
<body class="sticky-header left-side-collapsed" style="background-color: #f5f8f9;">
    <!-- 删除文件（Modal） -->
    <div class="modal fade" id="delFileModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content text-center">
          <div class="modal-body">
            <p>是否确认删除该文件？
          </div>
          <div class="modal-footer">
            <p>
              <button type="button" class="btn btn-default cancel" data-dismiss="modal">取消
              </button>
              <button type="button" id="delFileOK" class="btn btn-primary confirm">
                确认
              </button>
            </p>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal -->
    </div>
    <!-- /.modal end -->
    <!-- 删除选中文件（Modal） -->
    <div class="modal fade" id="delCheckFile" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content text-center">
          <div class="modal-body">
            <p>是否删除选中文件？
          </div>
          <div class="modal-footer">
            <p>
              <button type="button" class="btn btn-default cancel" data-dismiss="modal">取消
              </button>
              <button type="button" id="delCheckFileOK" class="btn btn-primary confirm">
                确认
              </button>
            </p>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal -->
    </div>
    <!-- /.modal end -->
    <!-- 删除模态框（Modal） -->
    <div class="modal fade" id="deleteFolder" tabindex="-1" role="dialog" aria-labelledby="deleteFolderTit" aria-hidden="true">
        <div class="modal-dialog">
        <div class="modal-content text-center">
          <div class="modal-body">
            <input type="hidden" id="folderId" value=""/>
            <p>是否确认删除该文件夹？
          </div>
          <div class="modal-footer">
            <p>
              <button type="button" class="btn btn-default cancel" data-dismiss="modal">取消
              </button>
              <button type="button" id="delFolderOK" class="btn btn-primary confirm">
                确认
              </button>
            </p>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal -->
    </div>
    <!--清空进度项目模态框-->
    <div class="modal fade" id="hasFolder" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content text-center">
                <div class="modal-body">
                    <div class="bg-clear">
                        <img src="/resources/src/images/bg-clearProjects.png" width="262" height="213" />
                        <p>改进度下还存在项目，请清空项目后再操作</p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary confirm" data-dismiss="modal">确认</button>
                </div>
            </div>
        </div>
    </div>
    <jsp:include page="../common/left-slide.jsp" flush="true">
        <jsp:param name="pageHeader" value="fileHeader" />
    </jsp:include>
    <div class="main-content">
        <jsp:include page="../common/header-start.jsp" />
        <div class="fileList">
            <div class="fileBar">
                <h3>
                    <ul class="clearfix bread">
                    	<li class="tap"><a href="javascript:;" onclick="window.history.back();location.reload();">返回上一级</a>&nbsp;|&nbsp;</li>
                        <li class="tap"><a href="/folder/list">文件管理</a></li>
                         <c:if test="${folder.fatherFolder!='' && folder.fatherFolder!=null }">
	                        <li><a href="/folder/childrenFolder/${folder.fatherFolder.id }" style="color:#23a8f5;">${folder.fatherFolder.name }</a></li>
                         </c:if>
                         <li><a href="/file/detail/${folder.id }">${folder.name }</a></li>
                    </ul>
                </h3>
                <input type="hidden" id="fid" value="${fid }"/>
                <input type="hidden" id="fileId" value=""/>
                <input type="hidden" id="userId" value="${user.id }"/>
                <div class="barRight">
                    <div class="barBtn newCreat"><i class="iconfont icon-shangchuan"></i> <a class="upload-bp upload-bp1"  id="createFile" href="javascript:;" onmouseover='$(".bp-warn").show();' onmouseout='$(".bp-warn").hide();' style="color: #23a8f5;">上传</a></div>
                    <div class="barBtn fileDel" onclick="deleteSelectFile();"><i class="iconfont icon-shanchu2"></i> 删除</div>                    
                    <div class="fileSearch" id="searchFile"><input type="text" placeholder="输入文件名称查找" id="fileName"><i class="iconfont icon-sousuo-sousuo"></i></div>
                    
                </div>
            </div>
            <div class="fileRow fileDetailRow">
              <div class="uploadbar" style="margin-top:57px;margin-left:0;">
                   <div id="bpProgressBar" class="bar-on"></div>
               </div>
                <ul id="mytable">
                <c:if test="${fn:length(folder.childrenList)>0 }">
                <c:forEach items="${folder.childrenList }" var="folder">
	                    <li>
	                        <div class="rfileName"><a href="/file/detail/${folder.id }"><i class="iconfont icon-iconfontwenjian2copy"></i> <span>${folder.name }</span></a></div>
		                    <div class="rfileBtn" style="opacity: 0;">
		                            <i class="iconfont icon-weibiaoti2fuzhi03" icontip='重新命名' data-toggle="modal" data-target="#editFileName" dataid="${folder.id }"></i>
		                            <i class="iconfont icon-shanchu2" icontip='删除' data-toggle="modal" data-target="${fn:length(folder.fileList) > 0 ? '#hasFolder' : '#deleteFolder'}" dataid="${folder.id }"></i>
		                    </div>
	                        <div class="rfileTime">创建时间：${folder.createTime }</div>
	                        <div class="rfileNum">共${fn:length(folder.fileList)}个文件</div>
	                    </li>
                	</c:forEach>
                </c:if>
                <input type="hidden" id="pageNo" value="${page.pageNo }"/>
				<input type="hidden" id="pageSize" value="${page.pageSize }"/>
				<input type="hidden" id="totalCount" value="${page.totalCount }"/>
				<input type="hidden" id="totalPages" value="${page.totalPages }"/>
               	<c:forEach items="${page.result }" var="file">
                    <li>
                        <div class="rfileName">
                            <input type="checkbox" name="selectFile" id="checkbox-${file.id}" value="${file.id }" class="regular-checkbox">
                            <label for="checkbox-${file.id}"></label>
                            <span style="margin-left: 0;"><a href="/file/downFile/${file.id }">${file.name }</a></span>
                        </div>                        
                        <div class="rfileSize">文件大小：<fmt:formatNumber type="number" value="${file.size/1024 }" pattern="0.00" maxFractionDigits="2"/>M</div>
                        <div class="rfileTime">时间：${file.createTime }</div>
                        <div class="rfileBtn">
                            <i class="iconfont icon-shanchu2" icontip='删除' dataid="${file.id }" data-toggle="modal" data-target="#delFileModal"></i>
                            <i class="iconfont icon-shangchuan" icontip='重新上传' name="fileClass"  id="updateFile_${file.id }"></i>
                            <a href="/file/downFile/${file.id }"><i class="iconfont icon-download" icontip='下载'></i></a>
                        </div>
                    </li>                    
               	</c:forEach>
                </ul>
                <!--分页-->
			<!--pagination start-->
			<!-- <div id="pagination"></div> -->
			<jsp:include page="/common/page.jsp" />
			<!--pagination end-->
            </div>
        </div>
    </div>
    <script src="/resources/src/js/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="/resources/src/js/jquery.nicescroll.js"></script>
    <script src="/resources/src/js/main.js"></script>    
    <script src="/resources/src/js/jquery.paginate.js"></script>
    <script src="/resources/src/js/file.js"></script>
    <script src="/resources/src/js/page.js"></script>
    <jsp:include page="/common/plupload/pluploadInclude.jsp"></jsp:include>
    <script type="text/javascript">
    	$(function(){
    		 proFileUpload(); //项目文件上传
    		 $('i[name="fileClass"]').each(function(){
	    		 againUploadFile($(this).attr("id"));
    		 });
    		 
   		 	function proFileUpload(){
  				var clickId = "createFile", //上传按钮id
  				fileName ="uploadFolderFile", //文件对应服务器名字
  				url = '/uploadFile/file',
  				maxFileSize='50mb',//文件最大尺寸
  				FileType='doc,ppt,docx,pptx,pdf',//文件类型
  				progressBar='#bpProgressBar',//文件上传进度条
  				successType='folderFile', //文件处理类型判断，主要用于区分裁剪功能
  				showImgDiv ='#showBpFileName'; //文件上传后，显示在哪个DIV
  				var file = new Array();
  				var fid = $("#fid").val();
  				file.push(fid);
  				uploadFolderFile(fileName,url,clickId,maxFileSize,FileType,progressBar,successType,showImgDiv, file);//上传BP
   			}
    	})
    	
    	function againUploadFile(clickIdStr){
			var fileName ="uploadFolderFile", //文件对应服务器名字
			url = '/uploadFile/file',
			maxFileSize='50mb',//文件最大尺寸
			FileType='doc,ppt,docx,pptx,pdf',//文件类型
			progressBar='#bpProgressBar',//文件上传进度条
			successType='folderFile', //文件处理类型判断，主要用于区分裁剪功能
			showImgDiv ='#showBpFileName'; //文件上传后，显示在哪个DIV
			var file = new Array();
			var fid = $("#fid").val();
			file.push(fid);
			file.push(clickIdStr.split("_")[1]);
			uploadFolderFile(fileName,url,clickIdStr,maxFileSize,FileType,progressBar,successType,showImgDiv, file);//上传BP 
    	}
    </script>
</body>
</html>